import { View, Text, Button } from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";
import { useRequest, useBoolean, useSetState } from "ahooks";
import { getTaskLogs } from "@/api";

import "./index.scss";

export default function Tasklog() {
  // const { data } = useRequest(getTaskLogs({ type: 1 }), {});

  // console.log(555, data);
  const [taskData, setTaskData] = useSetState({});

  useLoad((opts) => {
    console.log("Page loaded.", opts);
    getTaskLogs({ type: opts.type || "" })
      .then((data) => {
        // console.log(555, data);
        setTaskData({...data.data});
      })
      .catch((err) => {
        console.log("errerrerr", err);
      });
  });

  // const goPage = () => {
  //   console.log(taskData);

  //   Taro.navigateTo({
  //     url: '/pages/vipprivacy/rule?id=' + taskData.slug
  //   });
  // }

  return (
    <View className="task-log">
      <View className="card head-sec">
        <View className="done-box">
          <View className="label">已达标</View>
          <View className="num">
            {taskData?.done}
            <Text className="unit">期</Text>
          </View>
          <View
            className="rule-btn text-blue"
            onClick={() =>
              Taro.navigateTo({
                url: `/pages/viprule/index?id=${taskData?.slug}`,
              })
            }
          >
            <Text className="cuIcon-question"></Text> VIP代理商奖励规则
          </View>
        </View>

        <View className="solid-top fee-box flex justify-between align-center">
          奖励：{taskData.vip_fee}
          {taskData.unit}
          <View
            className="cu-button bg-blue round btn"
            onClick={() =>
              Taro.navigateTo({
                url: `/pages/withdraw/rmb?hint=${
                  taskData?.stat?.hint || ""
                }&type=${taskData?.stat?.type}&price=${
                  taskData?.stat?.rmb || taskData?.stat?.value || 0
                }`,
              })
            }
          >
            申请提现
          </View>
        </View>
      </View>

      <View className="list">
        {taskData?.list?.map((item, index) => (
          <View className="card flex align-center" key={index}>
            <Text className="left">{index + 1}</Text>
            <View className="center">
              <View className="bold">考核金额：{item.target}元</View>
              <View className="text-red bold">交易金额：{item.money}元</View>
              <View className="text-sm text-gray">
                有效期：{item.bdate} ~ {item.edate}
              </View>
            </View>
            <View className="right">
              {item.done && (
                <Text className="cu-tag round light bg-red">已完成</Text>
              )}
              {!item.done && (
                <Text className="cu-tag round light bg-gray text-white">
                  待完成
                </Text>
              )}
            </View>
          </View>
        ))}
      </View>
    </View>
  );
}
